<template>
  <div class="discover-box">
    <!-- 首页搜索框 -->
    <van-search v-model="value" shape="round" background="#e4463b" placeholder="请输入搜索关键词" @focus="onFocus">
      <template #left>
        <div @click="showPopup" class="moreIcon"><i class="iconfont icon-gengduo"></i></div>
      </template>
    </van-search>
    <!-- 轮播图组件 -->
    <discover-bnner :bnnerList="bnnerList" />
    <!-- 导航栏组件 -->
    <discover-nav-swipe />
    <!-- 分割线 -->
    <van-divider />
    <!-- 推荐歌单头部组件 -->
    <discover-nav-header title="推荐歌单" />
    <!-- 推荐歌单开始 -->
    <discover-recommend :recommendList="recommendList" />
    <!-- 分割线 -->
    <van-divider />
    <!-- 新歌速递头部组件 -->
    <discover-nav-header title="新歌速递" />
    <!-- 新歌速递组件 -->
    <discover-top-list :topSongData="topSongData" />
    <!-- 热门歌手标题 -->
    <discover-nav-header title="热门歌手" />
    <!-- 热门歌手组件 -->
    <discover-hot-singer :hotSingerList="hotSingerList" />
    <!-- 左侧弹出层，开始 -->
    <van-popup v-model="show" position="left">
      <discover-left-popup />
    </van-popup>
    <!-- 左侧弹出层，结束 -->
  </div>
</template>

<script  type='module'>
import DiscoverBnner from './components/DiscoverBnner'// bnner组件
import DiscoverNavSwipe from './components/DiscoverNavSwipe'// 导航栏组件
import DiscoverNavHeader from './components/DiscoverNavHeader'// 组件头
import DiscoverRecommend from './components/DiscoverRecommend'// 推荐歌单组件
import DiscoverTopList from './components/DiscoverTopList'// 新歌速递组件
import DiscoverHotSinger from './components/DiscoverHotSinger'// 热门歌手组件
import DiscoverLeftPopup from './components/DiscoverLeftPopup'// 左边弹出组件

export default {
  name: 'Discover',
  components: {
    DiscoverBnner, // 注册bnner组件
    DiscoverNavSwipe, // 注册导航栏组件
    DiscoverNavHeader, // 注册组件头
    DiscoverRecommend, // 注册推荐歌单组件
    DiscoverTopList, // 注册新歌速递组件
    DiscoverHotSinger, // 注册热门歌手组件
    DiscoverLeftPopup// 注册左边弹出组件
  },
  data () {
    return {
      // 首页bnner数据
      bnnerList: [],
      topList: [],
      recommendList: [],
      // 控制右侧弹出层
      show: false,
      value: '',
      // 热门歌手数组
      hotSingerList: [],
      // 新歌速递数据
      topSongList: []
    }
  },
  computed: {
    // 将新歌速递数据变为二维数组
    topSongData () {
      const newTopSongList = []
      this.topSongList.forEach((item, i) => {
        const index = i % 4
        if (!newTopSongList[index]) {
          newTopSongList[index] = []
        }
        newTopSongList[index].push(item)
      })
      return newTopSongList
    }
  },
  methods: {
    // 获取首页bnner图函数
    async getBnner () {
      const res = await this.$http({
        url: '/banner', params: { type: 1 }
      })
      this.bnnerList = res.banners.map(itme => ({
        imageUrl: itme.pic // bnner图Url
      }))
      // console.log(res.banners)
    },
    // 获取推荐歌单函数
    async getRecommend () {
      const res = await this.$http({ url: '/personalized', params: { limit: 10 } })
      this.recommendList = res.result.map(itme => ({
        id: itme.id, // 歌单id
        name: itme.name, // 歌单名称
        picUrl: itme.picUrl// 歌单图片Url
      }))
    },
    // 获取新歌速递数据函数
    async getTopSongList () {
      const res = await this.$http({ url: '/top/song' })
      this.topSongList = res.data.slice(0, 12).map(itme => ({
        id: itme.id, // 歌曲id
        picUrl: itme.album.picUrl, // 歌曲封面
        name: itme.name, // 歌曲名称
        artists: itme.artists.map((item) => item.name).join('/') // 演唱者,处理数组用“/”分隔
      }))
    },
    // 获取热门歌手数据函数
    async getHotSingerList () {
      const res = await this.$http({ url: '/top/artists', params: { offset: 0, limit: 9 } })
      this.hotSingerList = res.artists.map(itme => ({
        id: itme.id, // 歌手id
        name: itme.name, // 歌手名称
        img1v1Url: itme.img1v1Url// 歌手头像
      }))
    },
    // 点击跳转到搜索页面
    onFocus () {
      this.$router.push('/search')
    },
    // 点击弹出右侧Popup
    showPopup () {
      this.show = true
    }
  },
  created () {
    this.getBnner()// 调用获取首页bnner数据函数
    this.getRecommend() // 调用获取首页推荐歌单数据函数
    this.getHotSingerList()// 调用获取热门歌手数据函数
    this.getTopSongList()// 调用获取新歌速递数据函数
    console.log('发现组件被创建了')
  }
}
</script>

<style lang="less" scope>
.van-search {
  .moreIcon {
    font-size: 25px;
    padding: 0px 8px 0px 6px;
    color: #fafafa;
  }
}
</style>
